<template>
	<section style="margin-top: 20px;">
		<el-row>
			<el-col :span="24" >
				<el-tabs v-model="memberType" type="card">
				    <el-tab-pane label="课程成员" name="0"></el-tab-pane>
				    <el-tab-pane label="申请列表" v-if="$store.state.role!='student'&&$store.state.courseInfo.isFree" :disabled="$store.state.courseInfo.type!=0" name="1"></el-tab-pane>
				    <el-tab-pane label="添加成员" v-if="$store.state.role!='student'&&!$store.state.courseInfo.isFree" :disabled="$store.state.courseInfo.type!=0" name="2"></el-tab-pane>
				</el-tabs>			
			</el-col>
		</el-row >
		<el-row v-if="memberType!=2">
		  <el-col :span="4" v-for="el in Lists" :key="o" :offset="2" style="margin-bottom:10px;">
		    <el-card :body-style="{ padding: '0px' }">
		      <img src="../../../static/img/admin.jpg" class="image" style="width: 100%;">
		      <el-row style="padding: 14px;">
		      	<el-col :span="17">
		      		<p class="team-textp">{{el.user.realName}}</p>
		      		<p class="team-textp">{{el.user.phone}}</p>
		      	</el-col>
			    <el-col :span="7">
		      		<el-button type="danger"  v-if="memberType==0&&$store.state.role!='student'&&$store.state.courseInfo.type==0" @click="handleDel(el)" size="mini">移出课程</el-button>
		      		<el-button type="warning" v-if="memberType==1&&$store.state.role!='student'&&$store.state.courseInfo.type==0" @click="editIntro(el)" size="mini">同意进入</el-button>
		      		<el-button type="danger"  v-if="memberType==1&&$store.state.role!='student'&&$store.state.courseInfo.type==0" @click="handleDel(el)" size="mini" style="margin-left: 0;">拒绝进入</el-button>
		      </el-col>	        
		      </el-row>
		    </el-card>
		  </el-col>
		</el-row>	
		<el-row  v-if="memberType==2">
			<el-col :span="12" :offset="6">		
				<el-form label-width="150px" class="demo-ruleForm">
					<el-form-item label="上传excel文件:" >
							<el-upload
							  class="upload-demo"
							  drag
							  action="cc"
							  :before-upload="beforeupload"
							  limit='1'
							  accept="xls/*">
							  <i class="el-icon-upload"></i>
							  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							  <div class="el-upload__tip" slot="tip">只能上传xls文件</div>
							</el-upload>	  	
				  </el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</section>
</template>

<script>
	import { courseStudent,courseStudentedit,courseStudentdelete,usermoreadd} from '../../api/api';
	import { quillEditor } from 'vue-quill-editor' //调用编辑器

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				intro:"",		
				Type:"0",
				memberType:"0",
				isAgree:true,
				ID:this.$route.query.id,
				page:"1",
				pageSize:"100",
				Lists:[]
			}
		},
		watch:{
			'memberType':function() {
				if(this.memberType==0){
					this.isAgree=true;
				}
				if(this.memberType==1){
					this.isAgree=false;
				}
				this.getList()
			}
		},		
	    components: {
	      quillEditor
	    },    		
		methods: {
            beforeupload(file) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;

                //重新写一个表单上传的方法
                var param = new FormData();
                param.append('file', file, file.name);
                param.append('role','student');
                param.append('courseId',this.ID);
				usermoreadd(param).then((r) => {
					if(!r.error){
						this.addLoading = false;
						this.$message({
							message: '添加成功',
							type: 'success'
						});							
					}else{
						this.$message({
							message: r.message,
							type: 'error'
						});										
					}
				})                
                return false;
            },	 			
			changeType:function(value){
				this.Type=value;
			},
			//页面跳转
		    skip(link,id,type){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			type:type
		        		}
		        	}
		        )
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				//NProgress.start();
				let params={pageNum:this.page,pageSize:this.pageSize,courseId:this.$route.query.id,isAgree:this.isAgree};
				courseStudent(params).then((res) => {
					this.Lists = res.list;
					//NProgress.done();
				});					

			},
			handleDel:function (row) {
				this.$confirm('确认移除该成员吗', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					//NProgress.start();
					let paras=this.ID+'_'+row.userId;
					courseStudentdelete(paras).then((res) => {
						if(!res.error){
							//NProgress.done();
							this.$message({
								message: '移除成功',
								type: 'success'
							});
							this.getList();							
						}
					});
				})
			},
			editIntro:function(row){
				this.$confirm('确定同意学生吗', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('isAgree',true);
					params.append('courseId',this.ID);
					params.append('userId',row.userId);
					courseStudentedit(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '操作成功',
								type: 'success'
							});
							this.getList();		
						}else{
							this.$message({
								message: '操作失败',
								type: 'error'
							});						
						}
					})	
				})		
			
			},			
		},	
		mounted() {
			var _this=this;
			this.getList()
	
		}
	};

</script>

<style>
	.team-textp{
		font-size: 14px;
		margin-bottom:5px;
		margin-top: 0;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>